<template>
  <div>
    <div class="Motion" v-for="item in contentList" :key="item.id">
      <div class="left-round"></div>
      <div class="leftaddround">
        <div class="add"></div>
        <div class="add2"></div>
      </div>
      <div class="right-round"></div>
      <div class="MotionContent">
        <div class="contentlist">内容: {{item.content}}</div>
        <div class="contentlist">时间: {{item.showTime[0]}}</div>
        <div class="contentlist">地点: {{item.address}}</div>
      </div>
      <van-button class="button-default" @click="detailDialog(item)">查看详情</van-button>
    </div>
    <!-- 弹出层 -->
    <van-dialog
      style="height: 70vh; overflow: scroll;"
      v-model="showDialog"
      @confirm="confirm"
      title="通 知"
    >
      <van-divider content-position="left">具体内容</van-divider>
      <van-field type="textarea" readonly autosize v-model="contentData.matters" />
      <van-divider content-position="left">要 求</van-divider>
      <van-field type="textarea" autosize readonly v-model="contentData.requirements" />
      <van-divider content-position="left">时 间</van-divider>
      <van-field readonly v-model="contentData.showTime" />
      <van-divider content-position="left">地 点</van-divider>
      <van-tag style="margin-left: 5vw;" type="danger" plain size="large">{{contentData.address}}</van-tag>
      <van-divider content-position="left">负责人 / 组织</van-divider>
      <van-tag style="margin-left: 5vw;" type="success" plain size="large">{{contentData.header}}</van-tag>
      <van-divider content-position="left">协助人 / 组织</van-divider>
      <van-tag style="margin-left: 5vw;" type="warning" plain size="large">{{contentData.assit}}</van-tag>
    </van-dialog>
  </div>
</template>

<script>
export default {
  props: {
    contentList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      dynamicForm: {},
      showDialog: false,
      contentData: {}
    };
  },
  methods: {
    detailDialog(item) {
      this.contentData = item;
      this.contentData.showTime = item.showTime[0] + "至" + item.showTime[1];
      this.showDialog = true;
    },
    confirm() {
      this.$emit("getDynamicList");
    }
  }
};
</script>

<style scoped>
.MotionBox {
  width: 100%;
  height: 325px;
}
.Motion {
  position: relative;
  margin-left: 1%;
  margin-right: 1%;
  height: 150px;
  margin-top: 10px;
  border-radius: 15px;
  background-color: #ffffff;
  overflow: hidden;
}
.left-round {
  position: relative;
  width: 125px;
  height: 125px;
  background-color: #64cc4f;
  border-radius: 150px;
  margin-top: 55px;
  left: -40px;
  float: left;
}
.leftaddround {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 75px;
  background-color: #6aecb6;
  margin-top: 37.5px;
  left: -90px;
  float: left;
}
.add {
  position: relative;
  width: 30px;
  height: 3px;
  margin-top: 28.5px;
  margin-left: 15px;
  background: white;
  border-radius: 3px;
  float: left;
}
.add2 {
  position: relative;
  width: 3px;
  height: 30px;
  margin-top: 15px;
  margin-left: 28.5px;
  background: white;
  border-radius: 3px;
}
.right-round {
  position: relative;
  z-index: 2;
  width: 90px;
  height: 90px;
  border-radius: 90px;
  background-color: #71b5ee;
  margin-top: 100px;
  left: 17.5px;
  float: right;
}
.MotionContent {
  position: absolute;
  width: 225px;
  height: 75px;
  margin-left: 100px;
  margin-top: 25px;
}
.contentlist {
  position: relative;
  width: 200px;
  height: 25px;
  line-height: 25px;
  font-family: FangSong;
  font-size: 14px;
}
.button-default {
  position: absolute;
  z-index: 1;
  width: 90px;
  height: 33px;
  top: 95px;
  right: 50px;
  background: rgb(54, 202, 247);
  color: #ffffff;
  font-size: 14px;
  border-radius: 15px;
}
</style>